<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设备列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style type="text/css">
    html,body{
        height: 100%;
        margin: 0;
        background-color:#f7f7f7;
    }

   .div_equipment{
     background-color: #fff;
     height: 120px;
     display:-webkit-box;
   }

   .div_equipment_left{
     width: 70px;
     text-align: center;
     height: 120px;
     position: relative;
   }

   .div_equipment_left_type{
     width: 55px;
     height: 55px;
     border-radius: 55px;
     box-shadow: 0 0 2px 2px rgba(199, 199, 199, 0.28);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 16px 22px;
     margin-top: 15px;
     margin-left: 16px;
   }

   .div_equipment_left_lock{
     width: 100%;
     height: 14px;
     text-align: center;
     background-image: url(../image/click.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 13px 14px;
     margin-top: 10px;
     margin-left: 8px;
   }

   .div_equipment_left_ba{
    width: 60px;
    height: 60px;
    background-image: url(../image/green.png);
    background-repeat: no-repeat;
    background-size: 60px 60px;
    position: absolute;
    bottom: 0px;
    display: none;
   }

   .div_equipment_middle{
     -webkit-box-flex:1.0;
     margin-left: 15px;
   }

   .div_equipment_middle_input{
     width:60px;
     border: 0px;
     outline: none;
     margin-top: 15px;
   }

   .div_equipment_middle_input_img{
     width: 14px;
     height: 14px;
     background-image: url(../image/modify.png);
     background-repeat: no-repeat;
     background-size: 14px 14px;
     display: inline-block;
   }

   .div_equipment_right{
      width: 90px;
   }

   .div_equipment_right_closure{
     width: 75px;
     height: 25px;
     border: 1px solid #ff9f00;
     font-size: 13px;
     color: #ff9f00;
     line-height: 25px;
     text-align: center;
     border-radius: 3px;
     margin-right: 15px;
     margin-top: 15px;
   }

   .div_equipment_right_renew{
     width: 76px;
     height: 27px;
     background-color: #ff9f00;
     font-size: 13px;
     color: #fff;
     line-height: 27px;
     text-align: center;
     border-radius: 3px;
     margin-right: 15px;
     margin-top: 10px;
     display: none;
   }

   .div_scanning{
       background-color: #fff;
       margin-top: 15px;
   }

   .div_scanning1{
     height: 92px;
     margin-left: 15px;
     margin-right: 15px;
     border: 1px dashed #aaaaaa;
   }

   .div_scanning_1{
     text-align: center;
     height: 25px;
     background-image: url(../image/menu_ash.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: 25px 25px;
     margin-top: 10px;
   }

   .div_equipment_style1{
     font-size: 13px;
     color: #999999;
     margin-top: 10px;
   }
   .div_equipment_style2{
     margin-top: 5px;
   }
   .div_equipment_style3{
     text-align: center;
     font-size: 13px;
     color: #909090;
     margin-top: 10px;
   }
   .dropDown {
       width: 40%;
       background: #1b1b1b;
       text-align: center;
       position: absolute;
       right: 10px;
       top: 10px;
       display: none;
   }
   .dropDown:before {
       content: "";
       position: absolute;
       border: 15px solid #1b1b1b;
       border-top: 0 solid transparent!important;
       border-right: 15px solid transparent!important;
       border-left: 15px solid transparent!important;
       right: 10px;
       top: -10px
   }
   .dropDown li{
      height:30px;
      font-size:13px;
      color: #fff;
      line-height:30px;
      display:-webkit-box;
      padding: 10px;
   }

   .dropDown_div1{
     height:30px;
     width: 20px;
     background-size: 18px 18px;
     background-repeat: no-repeat;
     background-position: center;
     background-position: left;
     display: inline-block;
   }

   .dropDown_div2{
     -webkit-box-flex:1.0;
     text-align: left;
     margin-left: 10px;
   }

    </style>
</head>
<body>

  <div class="div_1" style="display:none">
    <div style="height:15px"></div>
    <div class="div_equipment">
       <div class="div_equipment_left">
          <div class="div_equipment_left_type"></div>
          <div class="div_equipment_left_lock"></div>
          <div class="div_equipment_left_ba"></div>
       </div>
       <div class="div_equipment_middle">
          <div class="div_equipment_middle_Name" style="width:auto;display: inline;">
             <input type="text" name="firstname" class ="div_equipment_middle_input" placeholder=""  style="color:#353535;font-size:15px"/>
             <div class="div_equipment_middle_input_img"></div>
          </div>
          <div class="div_equipment_middle_time div_equipment_style1"></div>
          <div class="div_equipment_middle_ip div_equipment_style1 div_equipment_style2"></div>
          <div class="div_equipment_middle_mac div_equipment_style1"></div>
       </div>
       <div class="div_equipment_right">
         <div class="div_equipment_right_closure">断开连接</div>
         <div class="div_equipment_right_renew">续  费</div>
       </div>
    </div>
  </div>

  <div class="div_scanning" style="display:none">
    <div style="height: 10px"></div>
    <div class="div_scanning1">
        <div class="div_scanning_1"></div>
        <div class="div_scanning_2 div_equipment_style3">扫描放行</div>
    </div>
    <div style="height: 10px"></div>
  </div>
  <ul class="dropDown" >
      <!-- <li id="dropDown_li1">
        <div class="dropDown_div1" style="background-image: url(../image/we_weaccount.png)">
        </div>
        <div class="dropDown_div2">购买子账号</div>
      </li>
      <div style="height:1px;background-color: #f9f9f9"></div> -->
      <li id="dropDown_li2">
        <div class="dropDown_div1" style="background-image: url(../image/we_weaccount.png)">
        </div>
        <div class="dropDown_div2">历史授权</div>
      </li>
  </ul>

  <div class="div_container">

  </div>

</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common.js"></script>

<script type="text/javascript">
    var mManuState = false;
    var mList;
    var mStatusSatae = 0;
    var mPackageList;
    apiready = function(){
      init();
      initData();
    };

     $("body").click(function(){
       if(mManuState){
         mManuState = false;
         $('.dropDown').slideUp("slow", function() {
             $(this).fadeOut(2000);
         });
       }
     })

     $('#dropDown_li1').click(function(){
       buyAccountNumber();
     })

     $('#dropDown_li2').click(function(){
       api.openWin({
           name: 'history',
           url: './history.html',
           pageParam: {
               name: 'test'
           }
       });

     })

    function init(){
      //如监听网络连接事件
     mPackageList =$api.getStorage(common.appKey.deviceCount);
     api.addEventListener({
     name: 'indexFrame_Event'
     }, function(ret, err) {
       if(ret){
         if(ret.value.type == 1){
           $('.dropDown').slideDown("slow");
           mManuState = true;
         }else if(ret.value.type == 2){
           console.log('.......letGoSate..........'+$api.getStorage(common.appKey.letGoSate))
              if($api.getStorage(common.appKey.letGoSate) && $api.getStorage(common.appKey.letGoSate)=="true"){
                var ip = $api.getStorage(common.appKey.ip)
                var mac = $api.getStorage(common.appKey.mac)
                common.brokenNetwork(ip,mac,$api.getStorage(common.appKey.siteAreaid),function(state){
              })
            }
         }
       }
    });

    api.addEventListener({
        name: 'NativeData'
    }, function(ret, err) {
        if (ret) {
            var appData = ret.value;
            common.getConsole('接收原生信息',JSON.stringify(ret));
            if(api.systemType === 'ios'){
              appData = JSON.parse(appData);
            }
            if(appData.type == 'closeWin'){
              api.closeWin({
                  name: 'currency'
              });
              if($api.getStorage(common.appKey.letGoSate)){
                var ip = $api.getStorage(common.appKey.ip)
                var mac = $api.getStorage(common.appKey.mac)
                common.brokenNetwork(ip,mac,$api.getStorage(common.appKey.siteAreaid),function(state){
                })
              }
            }else if(appData.type == 'updateEquipment'){
                var deviceCount = appData.deviceCount - mPackageList;
                console.log('....deviceCount....'+deviceCount);
                if(deviceCount>0){
                      initScanning(deviceCount);
                }
            }
        } else {
            console.log('.......收到原生的信息..出错........' + JSON.stringify(err));
        }
    });

    }

    // 获取数据
    function initData(){
      common.getApiShowProgress()
      var fwq = $api.getStorage(common.appKey.appFWQ);
      var parame = {
          userid: $api.getStorage(common.appKey.userId),
      }
      var parames = common.getJSONParame(common.keyword.url_deviceList,JSON.stringify(parame))
      common.getConsole('在线设备列表接口',JSON.stringify(parame)+"..fwq.."+fwq)
      common.ajax(fwq,parames,8,function(ret, err){
           common.getApiHideProgress()
           if(ret){
              common.getConsole('在线设备列表请求结果',JSON.stringify(ret));
              if (ret.code == 1) {
                    mList = ret.list
                    mStatusSatae = 0;
                    initEquipment(ret.list);
                    initScanning(mPackageList-ret.list.length);
              }else {
                  initScanning(mPackageList);
                  common.getShowViewError(ret.code,ret.msg);
              }
           }else {
             initScanning(mPackageList);
             common.getConsole('在线设备列表请求失败',JSON.stringify(err));
             common.getShowViewError(err.code,err.msg);
           }
      })
    }

    //断网
    function offtheNet(i,divName,div1){
      if(divName === '扫一扫'){
        api.sendEvent({
            name: 'app_equipment',
            extra: {
                type: 222,
            }
        });
        setTimeout(function(){
          api.closeWin({

          });
        },1000)
        return;
      }

      common.getApiShowProgress()
      common.brokenNetwork('11',mList[i].mac,mList[i].protect_id,function(state){
        common.getApiHideProgress()
        if(state){
          api.toast({
              msg: '断网成功',
              duration: 2000,
              location: 'bottom'
          });
          deleteEquipmentItem(div1);
        }else {
          api.toast({
              msg: '断网失败',
              duration: 2000,
              location: 'bottom'
          });
        }
      })
    }

    //锁定
    function lock(i){

      common.getApiShowProgress()
      var fwq = $api.getStorage(common.appKey.appFWQ);
      var toastMsg = "";
      var type;
      if(mList[i].binding == 1){
        type = 2
        toastMsg = '解绑成功'
      }else if(mList[i].binding == 2){
        type = 1
        toastMsg = '绑定成功'
      }
      var parame = {
          userid: $api.getStorage(common.appKey.userId),
          binding:type,
          mac:mList[i].mac,
          keyword:common.keyword.binding,
          protect_id:$api.getStorage(common.appKey.siteAreaid)
      }
      var parames = common.getJSONParame(common.keyword.url_forwardPort,JSON.stringify(parame))
      common.getConsole('绑定或解绑',JSON.stringify(parame))
      common.ajax($api.getStorage(common.appKey.appFWQ),parames,8,function(ret, err){
           common.getApiHideProgress()
           if(ret){
              common.getConsole('绑定接口请求结果', JSON.stringify(ret));
              if (ret.code == 1) {
                   api.toast({
                       msg: toastMsg,
                       duration: 2000,
                       location: 'bottom'
                   });
                   var div1 = $('.div_container>div').get(i)
                   var viewLock1 = div1.getElementsByClassName('div_equipment_left_lock')[0];
                   if(viewLock1 != undefined){
                     if(mList[i].binding == 1){
                           mList[i].binding =2
                          viewLock1.style.backgroundImage = 'url(../image/lock.png)';
                     }else {
                          mList[i].binding =1
                          viewLock1.style.backgroundImage = 'url(../image/click.png)';
                     }
                   }
              }else {
                  common.getShowViewError(ret.code,ret.msg);
              }
           }else {
             common.getConsole('绑定请求失败',JSON.stringify(err));
             common.getShowViewError(err.code,err.msg);
           }
      })
    }

    //修改Name
    function modifyName(i,name){
      var fwq = $api.getStorage(common.appKey.appFWQ);
      var parame = {
          userid: $api.getStorage(common.appKey.userId),
          mac:mList[i].mac,
          keyword:common.keyword.updateDeviceName,
          protect_id:$api.getStorage(common.appKey.siteAreaid),
          device_name:name
      }
      var parames = common.getJSONParame(common.keyword.url_forwardPort,JSON.stringify(parame))
      common.getConsole('修改名称接口',JSON.stringify(parame))
      common.ajax($api.getStorage(common.appKey.appFWQ),parames,8,function(ret, err){
           common.getApiHideProgress()
           if(ret){
              common.getConsole('修改名称请求结果', JSON.stringify(ret));
              if (ret.code == 1) {

                   api.toast({
                       msg: '修改名称成功',
                       duration: 2000,
                       location: 'bottom'
                   });

              }else {
                  common.getShowViewError(ret.code,ret.msg);
              }
           }else {
             common.getConsole('修改名称请求失败',JSON.stringify(err));
             common.getShowViewError(err.code,err.msg);
           }
      })
    }

    //买子账号
    function buyAccountNumber(){

      common.getApiShowProgress()
        common.judgeCloudNetworkState(function(state){
               if(state){
                common.getConsole('网络状态','..state..'+state);
                common.getApiHideProgress()
                $api.setStorage(common.appKey.letGoSate,false);
                api.openWin({
                    name: 'currency',
                    url: './currency.html',
                    pageParam: {
                        type: 1
                    }
                });
               }else {
                 common.showNetworking(function(state){
                    if(state){
                      common.judgeCloudNetworkState(function(state){
                        common.getApiHideProgress()
                                 if(state){
                                   $api.setStorage(common.appKey.letGoSate,true);
                                   api.openWin({
                                       name: 'currency',
                                       url: './currency.html',
                                       pageParam: {
                                           type: 1
                                       }
                                   });
                                 }else {
                                   api.toast({
                                       msg: '网络连接失败，您可以打开移动网络来购买',
                                       duration: 3000,
                                       location: 'bottom'
                                   });
                                 }
                      })

                    }else {
                      common.getApiHideProgress()
                      api.toast({
                          msg: '网络连接失败，您可以打开移动网络来购买',
                          duration: 3000,
                          location: 'bottom'
                      });
                    }
                 })
               }
        })
    }

    //初始化扫码框 initScanning
    function initScanning(length){
      console.log('...length.....'+length);
          if(length > mPackageList || length == 0){
            api.toast({
                msg: '暂时无记录',
                duration: 2000,
                location: 'bottom'
            });
            return;
          }
         var temp = document.getElementsByClassName('div_scanning')[0].innerHTML;
         for (var i = 0; i < length; i++) {
             var div = document.createElement('div');
             div.className = "div_scanning";
             div.innerHTML = temp;
             (function(Index) {
                 div.addEventListener('click', function(e) {
                        console.log('..........Index.....'+Index);
                        api.sendEvent({
                            name: 'app_equipment',
                            extra: {
                                type: 222,
                            }
                        });
                        setTimeout(function(){
                          api.closeWin({

                          });

                        },1000)
                 }, false);
             })(i);

             $('.div_container').append(div);
         }
    }

    //初始化设备管理
    function initEquipment(data){
      var temp = document.getElementsByClassName('div_1')[0].innerHTML;
      for (var i = 0; i < data.length; i++) {
         var div = document.createElement('div');
          div.innerHTML = temp;
          div.className = 'div_containerSon'+i;
          var viewClosure = div.getElementsByClassName('div_equipment_right_closure')[0];
          if(data[i].status == 2){
               if(data[i].binding == 1){
                     viewClosure.innerText = '扫一扫';
               }else {
                 mStatusSatae++;
                 continue;
               }
          }
          var viewType = div.getElementsByClassName('div_equipment_left_type')[0];
          var viewLock = div.getElementsByClassName('div_equipment_left_lock')[0];
          var viewName = div.getElementsByClassName('div_equipment_middle_input')[0];
          var viewTime = div.getElementsByClassName('div_equipment_middle_time')[0];
          var viewIp = div.getElementsByClassName('div_equipment_middle_ip')[0];
          var viewMac = div.getElementsByClassName('div_equipment_middle_mac')[0];

          var timeName = '授权时间:'
          if(data[i].mac == common.appKey.mac){timeName = '放行时间:'}
          if(data[i].device_name != undefined){viewName.value = data[i].device_name;}
          viewMac.innerText = 'MAC地址:'+ data[i].mac;
          viewTime.innerText = timeName + data[i].create_time;
          viewIp.style.display = 'none'
          switch (data[i].device_type_id) {
            case 1:
                viewType.style.backgroundImage = 'url(../image/phone.png)'
                break;
            case 2:
                viewType.style.backgroundImage = 'url(../image/computer.png)';
                viewType.style.backgroundSize ='25px 22px';
                break;
            case 3:
                viewType.style.backgroundImage = 'url(../image/ipad.png)';
                viewType.style.backgroundSize ='25px 22px';
                break;
            case 4:
                viewType.style.backgroundImage = 'url(../image/computer.png)';
                viewType.style.backgroundSize ='25px 20px';
                break;
            default:

          }
          if(data[i].binding == 2){
            viewLock.style.backgroundImage = 'url(../image/lock.png)';
          }

          (function(Index) {
              viewClosure.addEventListener('click', function(e) {
                var div1 = $('.div_containerSon'+Index);
                var closure = div1.find('.div_equipment_right_closure');
                    offtheNet(Index,closure.text(),'div_containerSon'+Index);
              }, false);
              viewLock.addEventListener('click', function(e) {
                     console.log('..........Index.....'+Index);
                    lock(Index)
              }, false);

              viewName.addEventListener('change', function(e) {
                     console.log('..........Index.....'+Index);
                     var div1 = $('.div_containerSon'+Index);
                     var divInput = div1.find('.div_equipment_middle_input');
                     modifyName(Index,divInput.val())
              }, false);
          })(i);
          $('.div_container').append(div);
      }
      if(mStatusSatae>0){
          initScanning(mStatusSatae);
      }

    }

    //删除设备列表的子View
    function deleteEquipmentItem(divName){
      $('.'+divName).remove();
      initScanning(1);
    }

</script>
</html>
